<template>
	<view class="min-h-[100vh] bg-[var(--page-bg-color)] overflow-hidden" :style="themeColor()">
		<view class="bg-[#fff] fixed top-0 left-0 right-0 z-10">
			<view class="tab-style-1 !py-[24rpx] ">
				<view class="tab-left">
					<view class="tab-left-item" :class="{ '!text-primary class-select': activeStatus === '' }"
						@click="statusItemFn('')">全部</view>
					<!-- <block v-for="(item, index) in statusList" :key="index">
					<view class="tab-left-item" :class="{ '!text-primary class-select': activeStatus === item.status }"
						@click="statusItemFn(item.status)">{{ item.name }}</view>
				</block> -->
				</view>
				<view class="tab-right" @click="handleSelect">
					<view class="tab-right-date leading-[34rpx]">日期</view>
					<view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon"></view>
				</view>
			</view>
			<!-- 门店订单/个人订单 -->
			<view v-if="orderShowType == 'employee'">
				<u-subsection :list="searchType" @change="updateSearchType" mode="button" activeColor="var(--primary-color)"
					:fontSize="14" :current="searchTypeIndex"></u-subsection>
			</view>

		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getListFn"
			:top="orderShowType == 'employee' ? '144rpx' : '88rpx'">
			<!-- @click="toDetailFn(order)" -->
			<view v-for="(order, index) in list" :key="order.order_id" class="sidebar-margin card-template mt-[var(--top-m)]">
				<view class="flex items-center justify-between  mb-[20rpx]">
					<view class="text-[28rpx] ">会员姓名:
						{{ order.user?.nickname }}</view>
					<view class=" text-[28rpx]">手机号码:
						{{ mobileConceal(order.user?.mobile) }}
					</view>
				</view>
				<u-line dashed margin="10rpx 0"></u-line>

				<view class="flex items-center justify-between  mb-[20rpx]">
					<view class="text-[36rpx] font-500 price-font text-primary">{{ fen2yuan(order.payPrice) }} <text
							class="text-[30rpx]" v-if="order.bonusPrice > 0">（赠送 {{ fen2yuan(order.bonusPrice) }} 元）</text></view>
					<view class="leading-[38rpx] text-[var(--primary-color)] text-[28rpx]">{{ order.refundStatus === 10 ? '已退款' :
						'已支付' }}
					</view>
				</view>
				<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">赠送积分:
					{{ order.pointsPrice }},赠送成长值:
					{{ order.growPrice }}</view>
				<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">充值订单:
					<text>{{ order.no }}</text>
					<text class="w-[2rpx] h-[20rpx] bg-[#999] mx-[10rpx]"></text>
					<text class="text-[#EF900A]" @click="copy(order.no)">复制</text>
				</view>
				<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">充值员工:
					<text v-for="item in order.employeeStr" :key="item" class="mr-5px"> {{
						item.employeeName }}({{ item.employeeId }}):{{ item.proportion }}%</text>
				</view>
				<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">充值门店:
					{{ order.nodeName }}</view>

				<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">下单时间:
					{{ timeFormat(order.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
				<view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">支付时间:
					{{ timeFormat(order.payTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<mescroll-empty v-if="!list.length && loading" :option="{ tip: t('emptyTip') }"></mescroll-empty>
		</mescroll-body>
		<!-- 时间选择 -->
		<select-date ref="selectDateRef" @confirm="confirmFn" />
	</view>
	<!-- 水印 -->
	<watermark></watermark>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { t } from '@/locale'
import selectDate from '@/components/select-date/select-date.vue';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { getRechargeList, getRechargeStatusList } from '@/addon/recharge/api/recharge'
import { copy, mobileConceal } from '@/utils/common'
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { fen2yuan, timeFormat } from '@/utils/formatting';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
// const statusList = ref(null)
// const getRechargeStatusListFn = () => {
// 	getRechargeStatusList().then((res: any) => {
// 		statusList.value = res.data
// 	})
// }
// 类型搜索
const activeStatus = ref('')
const statusItemFn = (value: any) => {
	activeStatus.value = value;
	getMescroll().resetUpScroll();
}
const orderShowType = ref('employee') //订单展示类型 employee 门店员工  member 会员

/** 搜索类型 */
const searchType = ref([{ name: '门店订单', value: 0 }, { name: '个人订单', value: 1 }])
const searchTypeIndex = ref(0)
const updateSearchType = (index: number) => {
	searchTypeIndex.value = index;
	getMescroll().resetUpScroll();
}
//日期筛选
const create_time = ref([])
const selectDateRef = ref()
const handleSelect = () => {
	selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data: any) => {
	create_time.value = data;
	getMescroll().resetUpScroll();
}

// getRechargeStatusListFn()
const list = ref<Array<any>>([]),
	loading = ref<boolean>(false);

interface mescrollStructure {
	num: number,
	size: number,
	endSuccess: Function,
	[propName: string]: any
}
onLoad((option: any) => {
	console.log(option)
	orderShowType.value = option.type || "employee";

});
let wap_member_id = uni.getStorageSync('wap_member_id');
let wap_shop_member_id = uni.getStorageSync('wapShopMember').id;

const getListFn = (mescroll: mescrollStructure) => {
	loading.value = false;
	let data: Object = {
		pageNo: mescroll.num,
		pageSize: mescroll.size,
		employeeName: searchTypeIndex.value == 0 ? undefined : wap_member_id, //员工名称
		userId: orderShowType.value == "employee" ? undefined : wap_shop_member_id, //用户id

		// order_status: activeStatus.value,
		createTime: create_time.value,
	};





	getRechargeList(data).then((res: any) => {
		let newArr = res.data.list;
		mescroll.endSuccess(newArr.length);
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

// const toDetailFn = (data) => {
// 	return
// 	redirect({ url: '/addon/recharge/pages/recharge_record_detail', param: { id: data.order_id } });
// }
</script>

<style lang="scss" scoped></style>
